<template>
  <div class="IndexFooter">
    <div class="Footer">
      <div class="FooterContent">
        <!--        左-->
        <div class="ImgLeft">
          <!--          教育-->
          <div class="Img">
            <img src="../assets/images/Tian.png" alt="">
          </div>
          <!--          文字-->
          <div class="Content">
            <p>践行技术改变命运的初心</p>
            <p>打造IT职业教育的一面旗帜</p>
          </div>
        </div>
        <!--        中间-->
        <div class="Contact">
          <!--          联系-->
          <div class="Cont">联系我们</div>
          <!--          地址-->
          <div class="Adress">
            <p>公司地址：河北省石家庄市高新区方大科技园10号楼三层</p>
            <p> 联系电话：18888888888</p>
            <p>商务合作：18888888888@qq.com</p></div>
        </div>
        <!--        右-->
        <div class="Public">
          <!--          文字-->
          <div class="PubContent">
            <p>微信公众号</p>
          </div>
          <!--          二维码-->
          <div class="QrCode">
            <img src="../assets/images/二维码.png" alt="">
          </div>
        </div>
        <!--下面-->
        <div class="Link">
          <p>友情链接</p>
        </div>
        <!--     课堂外网   -->
        <div class="External">
          <ul>
            <li v-for="i in linkList" :key="i.value"><a :href="i.value"  target="_blank">{{i.label}}</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="StraightLine"></div>
    <div class="FooterF">
      <div>Copyright © 2017-2025 石家庄天亮教育科技有限公司 备案号:冀ICP备17020003号</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexFooter"
}
</script>

<style scoped lang="less">
.IndexFooter {
  position: relative;
  background-color: rgba(58, 63, 71, 1);

  .Footer {
    width: 100%;
    height: 366px;
    background: rgba(58, 63, 71, 1);
    //内容
    .FooterContent {
      width: 1200px;
      margin: auto;
      height: 366px;
      //左
      .ImgLeft {
        float: left;
        //教育
        .Img {
          padding-top: 67px;

          img {
            width: 133px;
            height: 47px;
          }
        }

        //文字
        .Content {
          padding-top: 2px;
          width: 167px;
          height: 42px;
          color: rgba(155, 155, 155, 1);
          font-size: 14px;

          p {
            text-align: left;
          }
        }
      }

      //中间
      .Contact {
        float: left;
        //联系
        .Cont {
          padding-top: 67px;
          margin-left: 350px;
          width: 60px;
          height: 22px;
          color: rgba(255, 255, 255, 1);
          font-size: 15px;
        }

        //地址
        .Adress {
          margin-left: 350px;
          margin-top: 39px;
          width: 352px;
          height: 101px;
          color: rgba(155, 155, 155, 1);
          font-size: 14px;

          p {
            text-align: left;
            margin-top: 20px;
          }
        }
      }

      //右
      .Public {
        float: right;
        //文字
        .PubContent {
          padding-top: 67px;
          margin-right: 12px;
          width: 75px;
          height: 22px;
          color: rgba(255, 255, 255, 1);
          font-size: 15px;
        }

        //二维码
        .QrCode {
          margin-top: 39px;

          img {
            width: 106px;
            height: 106px;
          }

        }
      }

      //  下面友情
      .Link {
        padding-top: 294px;

        p {
          width: 60px;
          height: 22px;
          color: rgba(255, 255, 255, 1);
          font-size: 15px;
        }
      }

      //课堂外网
      .External {
        margin-top: 10px;
        ul {
          overflow: hidden;
          li:first-child{
            padding-left: 0;
          }
          li{
            float: left;
            //width: 60px;
            height: 18px;
            font-size: 12px;
            padding-left: 25px;
            a{
              color: rgba(155, 155, 155, 1);
            }
          }

        }
      }
    }
  }

  .StraightLine {
    position: absolute;
    top: 272px;
    width: 100%;
    height: 0px;
    border: 1px solid rgba(71, 76, 84, 1);

  }

  .FooterF {
    width: 100%;
    height: 86px;
    background: rgba(43, 47, 54, 1);
    text-align: center;

    div {
      //margin-left: 736px;
      //top: 1855px;
      text-align: center;
      padding-top: 42px;
      height: 18px;
      color: rgba(155, 155, 155, 1);
      font-size: 12px;

    }
  }
}
</style>
<!--<template>-->
<!--    <div class="bottomBg">-->
<!--        <div class="box">-->
<!--            <div class="bottomLeft">-->
<!--                <div class="logo"><img src="../assets/images/logo.png" style="width: 40px;height: 40px"/><p>教学学习平台</p></div>-->
<!--                <div class="tip" style="text-align: left">友情链接</div>-->
<!--                <div class="link">-->
<!--                    <ul>-->
<!--                        <li v-for="i in linkList" :key="i.value"><a :href="i.value"  target="_blank">{{i.label}}</a></li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="info" style="text-align: left">Copyright © 2017-2025 石家庄天亮教育科技有限公司  备案号:冀ICP备17020003号</div>-->
<!--            </div>-->
<!--            <div class="bottomRight">-->
<!--                <div class="code">-->
<!--                    <img src="../assets/images/ERCode.png" alt="二维码">-->
<!--                </div>-->
<!--                <div class="message">扫码关注官方公众号</div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</template>-->

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'indexBottom',
    computed:{
      ...mapState({
        linkList:state=>state.dict.dictTree.ea_link['arr'],
      })
    },
    data(){
      return{
        // linkList:[
        //   {name:'天亮云课堂',url:'http://course.myhope365.com/index'},
        //   {name:'天亮教育官网',url:'http://www.myhope365.com/index'},
        //   {name:'IT毕业设计',url:''},
        //   {name:'尚云科技',url:'http://shangyuninfo.com/'},
        // ]
      }
    }
  }
</script>

<!--<style scoped lang="less">-->
<!--    .bottomBg{-->
<!--        position: relative;-->
<!--        bottom: 0;-->
<!--        min-width: 1290px;-->
<!--        width: 100%;-->
<!--        height: 215px;-->
<!--        background-image: url("../assets/images/bottomBg.png");-->

<!--        .box{-->
<!--            display: flex;-->
<!--            justify-content: space-around;-->
<!--            align-items: center;-->
<!--            height: 215px;-->
<!--            margin: 0 auto;-->
<!--            width: 92%;-->
<!--            .bottomLeft{-->
<!--                padding-left: 20px;-->
<!--                width: 500px;-->
<!--                font-family: Microsoft YaHei;-->
<!--                font-weight: 400;-->
<!--                color: #FFFFFF;-->
<!--                >.logo{-->
<!--                    font-size: 30px;-->
<!--                    font-family: JBeiWeiKaiSu;-->
<!--                    display: flex;-->
<!--                    p{-->
<!--                        margin: 0 10px;-->
<!--                    }-->
<!--                }-->
<!--                >.tip{-->
<!--                    font-size: 16px;-->
<!--                    margin-top: 20px;-->
<!--                }-->
<!--                >.link{-->
<!--                    margin: 15px 0 10px 0;-->
<!--                    font-size: 12px;-->
<!--                    width: 400px;-->
<!--                    ul{-->
<!--                        display: flex;-->
<!--                        padding-left: 0;-->
<!--                        justify-content: space-between;-->
<!--                        li{-->
<!--                            list-style: none;-->
<!--                            a{-->
<!--                                color: #FFFFFF;-->
<!--                            }-->
<!--                        }-->
<!--                    }-->
<!--                }-->
<!--                .info{-->
<!--                    font-size: 12px;-->
<!--                }-->
<!--            }-->
<!--            .bottomRight{-->
<!--                padding-right: 70px;-->
<!--                flex-shrink: 0;-->
<!--                font-size: 14px;-->
<!--                font-family: Microsoft YaHei;-->
<!--                font-weight: 400;-->
<!--                color: #FFFFFF;-->
<!--                text-align: center;-->
<!--            }-->
<!--        }-->

<!--    }-->

<!--</style>-->
